<template>
  <div class="add-on-item-main bgcFFF">
    <p class="coupon-amount color666 fs14 pdlr15">优惠券：{{couponName}}</p>
    <AddOnItemProductDiamonds
      :productData="productDate"
      @getProductId="getProductId"
      @handleChooseSku="handleChooseSku"/>

    <div class="subtotal w100 bgcFFF">
      <van-row>
        <van-col span="18">
          <p class="fs16 color333">小计:￥{{totalAmount}}</p>
          <p class="fs12 color7A7B82">快去选购商品参与满减活动吧</p>
        </van-col>
        <van-col span="6">
          <span class="btn-to-cart colorFFF inline-block w100 fs14 text-c" @click="toCart">去购物车</span>
        </van-col>
      </van-row>
    </div>

    <!--购买弹窗-->
    <van-popup v-model="showSku" class="bdratlr12" position="bottom">
      <div class="pop-box">
        <div class="pop-msg bgcFFF">
          <!--title-->
          <div class="title">
            <img v-if="imgList.length > 0" :src="imgList[0].path" alt />
            <div>
              <p>￥{{goods.price}}</p>
              <p>商品名称：{{goods.product_name}}</p>
              <i @click="hanldeShowPop" class="iconfont iconcha"></i>
            </div>
          </div>
          <!--title-->

          <!--cell-->
          <div class="pop-cell bgcFFF">
            <div class="color">
              <p>颜色</p>
              <p>
                <span
                  class="color-span"
                  v-for="(item, index) in popData.colorList"
                  @click="handleColor(item,index)"
                  :key="index"
                  ref="colorSpan"
                >{{item.value}}</span>
              </p>
            </div>
            <div class="type">
              <p>规格</p>
              <p>
                <span
                  class="type-span"
                  v-for="(item, index) in popData.typeList"
                  :key="index"
                  ref="typeSpan"
                  @click="handleType(item,index)"
                >{{item.value}}</span>
              </p>
            </div>

            <div class="number">
              <p>
                <span>数量</span>
                <span>
                  <i class="iconfont" @click="handlePlus">+</i>
                  <i>{{selectedNum}}</i>
                  <i class="iconfont" @click="handleSubtract">-</i>
                </span>
              </p>
            </div>
          </div>
          <!--cell-->
        </div>
        <div class="pop-btn text-c">
          <p>
            <span class="add-cart bg-add-cart" @click="handledAddCar">加入购物车</span>
          </p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
  import AddOnItemProductDiamonds from '../../components/AddOnItemProductDiamonds.vue'
  export default {
    components: {
      AddOnItemProductDiamonds,
    },
    data() {
      return {
        couponName: '满500元减40元',// 优惠券名称
        productDate:[
          {
            id:1,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:1,
            typeText:'产品上新',
            discount_price:'268.00',
            sales_volume:'2654'
          },
          {
            id:2,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            discount_price:'268.00',
            sales_volume:'2654'
          },
          {
            id:3,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            discount_price:'268.00',
            sales_volume:'2654'
          },
          {
            id:4,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            discount_price:'268.00',
            sales_volume:'2654'
          },
          {
            id:5,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:1,
            typeText:'产品上新',
            discount_price:'268.00',
            sales_volume:'2654'
          },
          {
            id:6,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            discount_price:'268.00',
            sales_volume:'2654'
          },
        ],  //热卖产品
        addItemList: [], // 凑单商品id数组
        showSku: false, // sku弹窗
        totalAmount: '200.00'
      }
    },
    methods: {
      // sku弹窗
      handleChooseSku(id) {
        console.log(id);
        this.showSku = true
      },
      // 商品详情
      getProductId(obj){
        this.$router.push({
          name: 'productDetail',
          query: {id: obj.id}
        })
      },
      // 去购物车
      toCart() {
        this.$router.replace({
          name: 'cart',
          query: {addItemList: this.addItemList}
        })
      },
    },
  }
</script>

<style scoped lang="scss">
@import "../../assets/css/addOnItem.scss";
</style>
